Carousel Slider

  • Usage

    pubspec.yaml

    
    
                  dependencies:
                    flutter:
                      sdk: flutter
                    carousel_slider: ^4.0.0
    
    
                  

    main scrren

    
                  import 'package:flutter/material.dart';
    import 'package:carousel_slider/carousel_slider.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatelessWidget {
      final List<String> images = [
        'https://via.placeholder.com/600x200/FF0000/FFFFFF',
        'https://via.placeholder.com/600x200/00FF00/FFFFFF',
        'https://via.placeholder.com/600x200/0000FF/FFFFFF',
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Banner Slider'),
          ),
          body: Center(
            child: CarouselSlider(
              options: CarouselOptions(
                height: 200.0,
                enlargeCenterPage: true,
                autoPlay: true,
                aspectRatio: 16 / 9,
                autoPlayCurve: Curves.fastOutSlowIn,
                enableInfiniteScroll: true,
                autoPlayAnimationDuration: Duration(milliseconds: 800),
                viewportFraction: 0.8,
              ),
              items: images.map((String imageUrl) {
                return Builder(
                  builder: (BuildContext context) {
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      margin: EdgeInsets.symmetric(horizontal: 5.0),
                      decoration: BoxDecoration(
                        color: Colors.grey,
                      ),
                      child: Image.network(
                        imageUrl,
                        fit: BoxFit.cover,
                      ),
                    );
                  },
                );
              }).toList(),
            ),
          ),
        );
      }
    }
    
    
    

    Positioning to top

    
    
    import 'package:flutter/material.dart';
    import 'package:carousel_slider/carousel_slider.dart';
    
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatelessWidget {
      final List<String> images = [
        'https://via.placeholder.com/600x200/FF0000/FFFFFF',
        'https://via.placeholder.com/600x200/00FF00/FFFFFF',
        'https://via.placeholder.com/600x200/0000FF/FFFFFF',
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Banner Slider'),
          ),
          body: Column (
            children: [
              CarouselSlider(
                options: CarouselOptions(
                  height: 200.0,
                  enlargeCenterPage: true,
                  autoPlay: true,
                  aspectRatio: 16 / 9,
                  autoPlayCurve: Curves.fastOutSlowIn,
                  enableInfiniteScroll: true,
                  autoPlayAnimationDuration: Duration(milliseconds: 800),
                  viewportFraction: 0.8,
                ),
                items: images.map((String imageUrl) {
                  return Builder(
                    builder: (BuildContext context) {
    
                      return Container(
                        width: MediaQuery.of(context).size.width,
                        margin: EdgeInsets.symmetric(horizontal: 5.0),
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black,
                              offset: Offset(2, 2),
                              spreadRadius: 2,
                              blurRadius: 5,
                            ),
                          ],
                          borderRadius: BorderRadius.all(Radius.circular(30)),
                        ),
                        child: GestureDetector(
                            child: Image.network(
                              imageUrl,
                              fit: BoxFit.cover,
                            ),
                            onTap: () {
                              print("Container was tapped");
                            }),
                      );
                    },
                  );
                }).toList(),
              ),
            ]
          ),
        );
      }
    }